<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="../static/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="../static/css/common.css">
    <style>
        .params {
            position: relative;
            border: 1px solid #d9e6ff;
            padding: 20px;
        }

        .params .title {
            position: absolute;
            top: -8px;
            left: 20px;
            background: white;
            width: 51px;
            text-align: center;
            color: #8aa5bb;
            font-size: 12px;
        }

        .params .param-item {
            margin-bottom: 10px;
        }

        .params .param-item .param-label {
            text-align: right;
            color: #1878ca;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">SeaHawk</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/analyze">analyze</a></li>
                    <li><a href="/home">comment</a></li>
                    <li><a href="/report">report</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>

    <div>
        <div class="container-fluid">
            <ol class="breadcrumb">

                <li class="active"><a href="/analyze">/analyze</a></li>

            </ol>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3>热点图</h3>
                        </div>
                        <div class="panel-body">

                            <div class="params">
                                <div class="title">
                                    参数
                                </div>
                                <div>
                                    <div class="row param-item">
                                        <div class="col-md-2 param-label">模型:</div>
                                        <div class="col-md-10">
                                            <select class="model">

                                                <select>
                                        </div>

                                    </div>
                                    <div class="row param-item">
                                        <div class="col-md-2 param-label">版本:</div>
                                        <div class="col-md-10 ">
                                            <select name="" id="" class="version"></select>
                                        </div>
                                    </div>
                                    <div class="row param-item">
                                        <div class="col-md-2 param-label">模型参数:</div>
                                        <div class="col-md-10">
                                            <select disabled="true">
                                                <option value="1">模型类型</option>
                                                <!-- <option value="2">csrnet</option>
                                                <option value="3">espgan</option> -->
                                                <select>
                                        </div>
                                    </div>
                                    <div class="row param-item">
                                        <div class="col-md-2 param-label">数目:</div>
                                        <div class="col-md-10">
                                            <button type="button" class="btn btn-default btn-xs">All</button>
                                            <button type="button" class="btn btn-default btn-xs">TOP 5</button>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="main" style="width: 100%;min-height: 300px;"></div>
                        </div>
                        <div class="panel-footer">
                            数据热点图
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3>title</h3>
                        </div>
                        <div class="panel-body">
                            <div class="params">
                                <div class="title">
                                    参数
                                </div>
                                <div>
                                    <div class="row param-item">
                                        <div class="col-md-2 param-label">模型:</div>
                                        <div class="col-md-10">
                                            <select class="model"> <select>
                                        </div>

                                    </div>
                                    <div class="row param-item">
                                        <div class="col-md-2 param-label">版本:</div>
                                        <div class="col-md-10 ">
                                            <select class="version"></select>
                                        </div>
                                    </div>
                                    <div class="row param-item">
                                        <div class="col-md-2 param-label">模型参数:</div>
                                        <div class="col-md-10">
                                            <select disabled="true">
                                                <option value="1">模型类型</option>
                                                <option value="2">csrnet</option>
                                                <option value="3">espgan</option>
                                                <select>
                                        </div>
                                    </div>
                                    <div class="row param-item">
                                        <div class="col-md-2 param-label">数目:</div>
                                        <div class="col-md-10">
                                            <button type="button" class="btn btn-default btn-xs">All</button>
                                            <button type="button" class="btn btn-default btn-xs">TOP 5</button>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="main2" style="width: 100%;min-height: 300px;"></div>
                        </div>
                        <div class="panel-footer">
                            数据热点图
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
            </div>
        </div>
    </div>
    <nav class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            @copyright HuaWei
        </div>
    </nav>
    <script src="../static/js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
    <script src="../static/js/analyze.js"></script>
    <script type="text/javascript">

        (function () {
            getCircleData();
            getColumnarData();
            //main 
            var myChart = echarts.init(document.getElementById('main'));
            function getTraversing(result) {
                series = []
                console.log(typeof (result['msr_name'][0]))
                var objKeys = Object.keys(result);
                for (var i = 0; i < objKeys.length; i++) {
                    // alert(i);

                    series.push({
                        // name: i,
                        name: result['msr_name'][i],
                        symbolSize: 10,
                        data: result['array' + i],
                        type: 'scatter',
                        label: {
                            emphasis: {
                                show: true,
                                formatter: function (param) {
                                    return param.data[2] + ': ' + param.data[1];
                                },
                                position: 'top',
                            }
                        },
                    });
                }
                return series

            }

            function getCircleData(version, model, top) {
                $.ajax({
                    type: "get",
                    async: true, //同步执行
                    url: "/output/v1.0/chart/scatter/",
                    data: {
                        'version': version,
                        'model': model,
                        'top': top,
                    },

                    dataType: "json", //返回数据形式为json
                    success: function (result) {
                        console.log(result);
                        var data = [result];
                        option = {
                            backgroundColor: new echarts.graphic.RadialGradient(0.0, 0.0, 0.0, [{
                                offset: 0,
                                color: '#f7f8fa'
                            }, {
                                offset: 1,
                                color: '#cdd0d5'
                            }]),
                            title: {
                                // text: '模型客观评分'
                            },
                            legend: {
                                right: 10,
                                // data: result['msr_name']
                            },
                            xAxis: {
                                type: 'value',

                            },
                            yAxis: {
                                type: 'value',
                                min: 78
                                // boundaryGap: false,
                                // data: [1,2,3,4,5,6,7,8,9,10]
                            },
                            series: getTraversing(result),
                        };

                        // myChart.hideLoading(option);  font-weight: bold;
                        myChart.setOption(option);
                    },
                    error: function (errorMsg) {
                        $("#main").html('<h2 id="chart3-nodata" style="text-align: center;line-height: 180px">暂无数据</h2>')
                    }
                });
            }

            //main2
            var brChart = echarts.init(document.getElementById('main2'));
            function getColumnarData() {
                $.ajax({
                    type: "get",
                    async: true, //同步执行
                    url: "/output/v1.0/chart/columnar/",
                    data: {},
                    dataType: "json", //返回数据形式为json
                    success: function (result) {
                        // console.log(result['name']);
                        option2 = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            title: {
                                // text: '超分性能'
                            },
                            legend: {
                                data: ['Pre_Time', 'NPU_Time', 'Post_Time']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: result['pre']
                            },
                            xAxis: {

                                type: 'category',
                                // data: ['10/20','10/21','10/22','10/23','10/24','10/25','10/26']
                                data: result['name']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: 'Pre_Time',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'insideRight'
                                        }
                                    },
                                    data: result['pre']
                                },
                                {
                                    name: 'NPU_Time',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'insideRight'
                                        }
                                    },
                                    data: result['npu']
                                },
                                {
                                    name: 'Post_Time',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'insideRight'
                                        }
                                    },
                                    data: result['post']
                                }
                            ]
                        };
                        brChart.setOption(option2);
                    },
                    error: function (errorMsg) {
                        $("#main2").html('<h2 id="chart3-nodata" style="text-align: center;line-height: 180px">暂无数据</h2>')
                    }
                });
            }

            function initEchart(idName, option) {
                var myEchart = echarts.init(document.getElementById("main5"));

                myEchart.setOption(option);
            }

            // 随机数生成
            function randomNum(digitNumber, holdNumber) {
                var random = Math.random();
                random = Math.pow(10, digitNumber) * random;
                random = random.toFixed(holdNumber);
                return random;
            }
        })()
    </script>

</body>

</html>